<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>队列指标监控</title>
    <style>
        .metrics-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        .queue-section {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .queue-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
        }
        .metric-item {
            display: inline-block;
            background: white;
            padding: 15px;
            margin: 5px;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            min-width: 150px;
            text-align: center;
        }
        .metric-value {
            font-size: 28px;
            font-weight: bold;
            color: #007bff;
        }
        .metric-label {
            font-size: 14px;
            color: #666;
            margin-top: 5px;
        }
        .refresh-btn {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        .refresh-btn:hover {
            background: #0056b3;
        }
    </style>
</head>
<body>
    <div class="metrics-container">
        <h1>队列指标监控</h1>
        <button class="refresh-btn" onclick="loadMetrics()">刷新数据</button>
        
        <div id="unified-section" class="queue-section">
            <div class="queue-title">UNIFIED 队列（瞬时消息）</div>
            <div id="unified-metrics"></div>
        </div>
        
        <div id="stream-section" class="queue-section">
            <div class="queue-title">STREAM_UNIFIED 队列（流消息）</div>
            <div id="stream-metrics"></div>
        </div>
        
        <div id="summary-section" class="queue-section">
            <div class="queue-title">总体统计</div>
            <div id="summary-metrics"></div>
        </div>
    </div>

    <script>
        function createMetricItem(label, value) {
            return `
                <div class="metric-item">
                    <div class="metric-value">${value}</div>
                    <div class="metric-label">${label}</div>
                </div>
            `;
        }
        
        function loadMetrics() {
            fetch('/api/console/queues/metrics')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const metrics = data.data;
                        
                        // UNIFIED队列指标
                        const unified = metrics.UNIFIED;
                        document.getElementById('unified-metrics').innerHTML = `
                            ${createMetricItem('总队列数', unified.totalQueues)}
                            ${createMetricItem('活跃队列', unified.activeQueues)}
                            ${createMetricItem('瞬时消息', unified.instantMessages)}
                            ${createMetricItem('延迟消息', unified.delayMessages)}
                            ${createMetricItem('总消息数', unified.totalMessages)}
                        `;
                        
                        // STREAM_UNIFIED队列指标
                        const stream = metrics.STREAM_UNIFIED;
                        document.getElementById('stream-metrics').innerHTML = `
                            ${createMetricItem('总队列数', stream.totalQueues)}
                            ${createMetricItem('活跃队列', stream.activeQueues)}
                            ${createMetricItem('流消息', stream.streamMessages)}
                            ${createMetricItem('延迟消息', stream.delayMessages)}
                            ${createMetricItem('待处理消息', stream.pendingMessages)}
                            ${createMetricItem('总消息数', stream.totalMessages)}
                        `;
                        
                        // 总体统计
                        const summary = metrics.summary;
                        document.getElementById('summary-metrics').innerHTML = `
                            ${createMetricItem('UNIFIED总消息', summary.totalUnifiedMessages)}
                            ${createMetricItem('STREAM总消息', summary.totalStreamMessages)}
                            ${createMetricItem('全部消息总数', summary.grandTotal)}
                        `;
                    } else {
                        alert('加载数据失败: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('请求失败: ' + error.message);
                });
        }
        
        // 页面加载时自动获取数据
        loadMetrics();
        
        // 每30秒自动刷新
        setInterval(loadMetrics, 30000);
    </script>
</body>
</html>